import React, { Component } from 'react'

// 函数式组件默认的时候，函数的参数就是我们要的 props
const Header = (props)=>{
  console.log(props.num);
  return (
    <>
      <div> 欢迎来到 {props.name} 班级 </div>
    </>
  )
}


// 类组件需要通过 this.props 来进行传递参数的接收获取
// 在函数式组件中没有 this
// 类组件中需要通过 this 进行访问
class Content extends Component {

  render(){

    console.log(this.props.contentName);

    return (<>
      <div> {this.props.contentName} 学习 react 实际上就是在学 JavaScript </div>
    </>)
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 属性传值的时候，只要不是纯字符串我们都需要加 {} */}
        <Header name='H5-2218' num={10}></Header>
        <Content contentName='张一' />
      </div>
    )
  }
}
